<template>
  <Card title="过滤条件" :bordered="false" :head-style="headStyle" :loading="loading">
    <template #extra>
      <RadioGroup v-model:value="comb" button-style="solid">
        <template v-for="item in tjList" :key="`${item.value}`">
          <RadioButton :value="item.value">
            {{ item.label }}
          </RadioButton>
        </template>
      </RadioGroup>
      <a-button class="ml-2" type="primary" @click="handleOk" :loading="loading"> 保存 </a-button>
    </template>
    <div class="w-full flex flex-col gap-10px">
      <template v-if="comb == '1'">
        <div>
          <a-button
            style="margin: 10px 0"
            :type="dataRef.filter && dataRef.filter.length ? 'primary' : 'default'"
            @click="handleConfiguration"
          >
            配置
          </a-button>
        </div>
        <div class="flex items-center gap-10px">
          排序字段
          <Select
            style="width: 130px"
            v-model:value="dataRef.orderby"
            :options="[{ value: 'id', label: 'ID' }, ...formGetFieldsData]"
            optionFilterProp="label"
            showSearch
          />
          顺序
          <Select
            style="width: 130px"
            v-model:value="dataRef.sort"
            :options="sortOptions"
            optionFilterProp="label"
            showSearch
          />
          记录状态
          <Select
            style="width: 130px"
            v-model:value="dataRef.cws_status"
            :options="cwsStatusOptions"
            optionFilterProp="label"
            showSearch
          />
        </div>
      </template>
      <FilterConditionsDesign
        v-if="comb == '2'"
        v-model:modelValue="dataRef.filter2"
        :formGetFieldsData="formGetFieldsData"
      />

      <div class="flex items-center gap-10px">
        默认
        <Select
          style="width: 130px"
          v-model:value="dataRef.unitCode"
          :options="unitCodeOptions"
          optionFilterProp="label"
          showSearch
        />
        注：此处配置在表单域选择宏控件、嵌套表格及嵌套表格2宏控件的过滤条件中也生效。
      </div>
    </div>
    <ConfigurationModal
      @register="registerConfigurationModal"
      @success="handleSuccessConfigurationModal"
    />
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { Card, Select, Radio } from 'ant-design-vue';
  import FilterConditionsDesign from './filterConditionsDesign/index.vue';
  import ConfigurationModal from '../../configuration/index';
  import { useModal } from '/@/components/Modal';
  import { sortOptions, cwsStatusOptions, unitCodeOptions } from './filterConditions';
  import { getVisualGetModuleFilter, getVisualSetModuleFilter } from '/@/api/module/module';
  import { isObject } from '/@/utils/is';
  import { useMessage } from '/@/hooks/web/useMessage';
  const RadioGroup = Radio.Group;
  const RadioButton = Radio.Button;
  const props = defineProps({
    moduleCode: {
      type: String,
      default: '',
    },
    formCode: {
      type: String,
      default: '',
    },
    headStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formGetFieldsData: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  });
  const { createMessage } = useMessage();
  const comb = ref('1');
  const dataRef = ref<Recordable>({ sort: 'desc', cws_status: '1', unitCode: '0' });
  const loading = ref(false);

  const fetch = async () => {
    await nextTick();
    const res = await getVisualGetModuleFilter({ moduleCode: props.moduleCode });
    if (isObject(res)) {
      dataRef.value = res;
    }
    if (
      !dataRef.value.filter ||
      (dataRef.value.filter && dataRef.value.filter.indexOf('<items') == 0)
    ) {
      comb.value = '1';
    } else {
      comb.value = '2';
      dataRef.value.filter2 = dataRef.value.filter;
    }
  };
  onMounted(fetch);

  const tjList = [
    {
      value: '1',
      label: '组合条件',
    },
    {
      value: '2',
      label: '脚本条件',
    },
  ];

  const [registerConfigurationModal, { openModal: openConfiguration }] = useModal();
  //组合条件配置
  const handleConfiguration = () => {
    openConfiguration(true, {
      list: dataRef.value.filter || [],
      formGetFieldsData: props.formGetFieldsData,
    });
  };

  const handleSuccessConfigurationModal = ({ value }) => {
    dataRef.value.filter = value;
  };

  //保存
  const handleOk = async () => {
    try {
      loading.value = true;
      const formData = Object.assign({}, dataRef.value);
      if (comb.value == '2') {
        formData.filter = formData.filter2;
        delete formData.filter2;
      }
      formData.code = props.moduleCode;
      formData.formCode = props.formCode;
      await getVisualSetModuleFilter(formData);
      createMessage.success('操作成功');
      fetch();
    } catch (error) {
      console.error(error);
    } finally {
      loading.value = false;
    }
  };
</script>
